<script setup lang="ts">
import { reactive, ref } from "vue";

let prounce = ref("spy");

let list = reactive([
  { id: "1", name: "PCL" },
  { id: "2", name: "ovo" },
]);

let group = reactive([
  { id: "group1", name: "A201" },
  { id: "group2", name: "A202" },
  { id: "group3", name: "A203" },
]);

let group1 = ref([
  { id: "group1", name: "A201" },
  { id: "group2", name: "A202" },
  { id: "group3", name: "A203" },
]);

function changeprounce() {
  prounce.value = "初入vue的新人";
}

function changelist() {
  list[0].name = "HelloReactive";
}

function changegroup() {
  group[2].name = "B502";
}

function changegroup1() {
  group1.value[2].name = "B502";
}
</script>
<template>
  <div>
    <h2>我是{{ prounce }}</h2>
    <button @click="changeprounce">按钮</button>
    <h2>{{ list[0].name }}! {{ list[1].name }}</h2>
    <button @click="changelist">按钮</button>
    <ul>
      <p>因为v-for会自动触发reactive的依赖收集</p>
      <li v-for="g in group" :key="g.id">{{ g.name }}</li>
      <button @click="changegroup">按钮</button>
    </ul>
    <p>ref代替reactive(既可以定义基本类型,又可以定义对象类型)</p>
    <ul>
      <li v-for="g1 in group1" :key="g1.id">{{ g1.name }}</li>
      <button @click="changegroup1">按钮</button>
    </ul>
  </div>
</template>
